{extend name="public:base" /}

{block name="title"}后台登录{/block}

{block name="body"}
<style>
    .login-gray-bg {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        background: url('__ADMIN__/img/new_bg.png');
    }

    #login-box {
        display: flex;
        width: 48%;
        height: 600px;
        background: #fff;
        border-radius: 10px;
    }

    #login-box .welcome {
        width: 380px;
        height: 600px;
        background: url('__ADMIN__/img/login-site-bg.png');
        display: flex;
        justify-content: center;
    }

    #login-box .welcome div {
        font-size: 28px;
        color: #fff;
        letter-spacing: 9px;
        margin-top: 150px;
    }

    #login-box .main {
        flex: 1;
        padding: 40px 60px;
    }

    #login-box .main .title-box {
        width: 100%;
        border-bottom: 1px solid #d8d8d8;
    }

    #login-box .main .title {
        width: 160px;
        font-size: 20px;
        color: #1890ff;
        font-weight: 500;
        padding: 18px 20px;
        border-bottom: 2px solid #1890ff;
    }

    #login-form {
        display: flex;
        flex-direction: column;
    }

    #login-form .input-box {
        display: flex;
        padding: 3px 14px;
        align-items: center;
        border: 1px solid #d8d8d8;
        border-radius: 5px;
        margin-top: 40px;
    }

    #login-form .input-box .icon {
        width: 22px;
        height: 22px;
    }

    #login-form .input-box .input {
        border: none;
        padding: 10px;
        flex: 1;
        color: #1f1f1f;
    }

    #login-form .input-box .input:focus {
        outline: none;
    }

    #login-form .input-box .input:-webkit-autofill {
        color: #ffffff!important;
        -webkit-text-fill-color: #1f1f1f;
        box-shadow: 0 0 0 1000px #fff inset;
    }

    #login-form .input-box .input::placeholder {
        color: #c5c5c5;
    }

    .me-btn {
        height: 50px;
        font-size: 18px;
        margin-top: 60px;
        background-color: #34acff;
        color: #fff;
    }

</style>

<body class="login-gray-bg">

<div id="login-box">
    <div class="welcome">
        <div>欢迎进入<br/>后台管理平台</div>
    </div>
    <div class="main">
        <div class="title-box">
            <div class="title">账号密码登录</div>
        </div>

        <form id="login-form" role="form" method="post" action="/admin/login/login">
            <div class="input-box">
                <img src="__ADMIN__/img/account.png" class="icon">
                <input type="text" name="login_account" class="input" placeholder="请输入账号">
            </div>
            <div class="input-box">
                <img src="__ADMIN__/img/password.png" class="icon">
                <input type="password" name="login_password" oninput="changePwd(this)" class="input hide-pwd" placeholder="请输入密码">
                <input type="text" name="login_password" oninput="changePwd(this)" style="display: none" class="input show-pwd" placeholder="请输入密码">
                <img src="__ADMIN__/img/hide-pwd.png" class="pwd-icon icon" onclick="ctrPwd()">
            </div>

            {:token()}
            <button type="submit" class="btn me-btn ajax-post">登录</button>
        </form>

    </div>
</div>

<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<script src="__ADMIN__/js/popper.min.js"></script>
<script src="__STATIC__/bootstrap/js/bootstrap.js"></script>
<script src="/static/popup/popup.js"></script>
<script>
    var hide_pwd = true;
    var password = '';

    function changePwd(that) {
        password = $(that).val();
        $('.show-pwd').val(password);
    }

    function ctrPwd() {
        if (hide_pwd) {
            // 显示密码
            $('.hide-pwd').hide();
            $('.show-pwd').show().val(password);
            hide_pwd = false;
            $('.pwd-icon').attr('src', '__ADMIN__/img/show-pwd.png')
        } else {
            // 隐藏密码
            $('.hide-pwd').show().val(password);
            $('.show-pwd').hide();
            hide_pwd = true;
            $('.pwd-icon').attr('src', '__ADMIN__/img/hide-pwd.png')
        }
    }
</script>
</body>{/block}